<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生荣誉信息管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            background: linear-gradient(120deg, #e3f0ff 0%, #f6fbff 100%);
            font-family: 'Segoe UI', Arial, sans-serif;
            color: #222;
        }
        .layout {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 210px;
            background: linear-gradient(180deg, #1976d2 0%, #4fc3f7 100%);
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 30px;
        }
        .sidebar .logo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #fff;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sidebar .logo img {
            width: 77px;
            height: 77px;
            border-radius: 50%;
            object-fit: cover;
        }
        .sidebar .nav {
            width: 100%;
            margin-top: 30px;
        }
        .sidebar .nav-item {
            width: 100%;
            padding: 14px 0 14px 40px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            align-items: center;
        }
        .sidebar .nav-item.active, .sidebar .nav-item:hover {
            background: rgba(255,255,255,0.18);
        }
        .sidebar .nav-item span {
            margin-right: 10px;
            font-size: 18px;
        }
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            box-shadow: 0 2px 8px rgba(25,118,210,0.06);
            padding: 0 32px;
            height: 64px;
        }
        .topbar .title {
            display: flex;
            align-items: center;
            font-size: 22px;
            color: #1976d2;
            font-weight: bold;
        }
        .topbar .title img {
            height: 38px;
            width: auto;
            margin-right: 12px;
            vertical-align: middle;
            display: inline-block;
        }
        .topbar .userbar {
            display: flex;
            align-items: center;
            gap: 32px;
            min-width: 0;
        }
        .topbar .welcome {
            color: #1976d2;
            font-size: 16px;
            margin-right: 0;
            margin-left: 12px;
            white-space: nowrap;
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .topbar .avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .topbar .avatar img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
            background: none;
            box-shadow: none;
        }
        .topbar .logout-btn {
            background: linear-gradient(90deg, #1976d2 0%, #4fc3f7 100%);
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 7px 18px;
            font-size: 15px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .topbar .logout-btn:hover {
            background: #1256a6;
        }
        .content {
            flex: 1;
            padding: 32px 40px;
            background: none;
        }
        .section { display: none; }
        .section.active { display: block; }
        /* 荣誉提交表单 */
        .form-row { display: flex; gap: 18px; }
        .form-row > div { flex: 1; }
        .form-group { margin-bottom: 18px; }
        .form-label { font-weight: bold; margin-bottom: 6px; display: block; }
        .form-input, .form-select, .form-radio, .form-date, .form-file, .form-textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #b6d0ee;
            border-radius: 5px;
            font-size: 15px;
        }
        .form-radio-group { display: flex; gap: 18px; }
        .form-submit {
            background: linear-gradient(90deg, #1976d2 0%, #4fc3f7 100%);
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 0;
            font-size: 17px;
            cursor: pointer;
            margin-top: 10px;
            width: 180px;
        }
        .form-submit:hover { background: #1256a6; }
        /* 荣誉卡片库 */
        .filter-bar { display: flex; gap: 18px; margin-bottom: 18px; }
        .card-list { display: flex; flex-wrap: wrap; gap: 18px; }
        .card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(25,118,210,0.08);
            width: 30%;
            min-width: 220px;
            padding: 18px 16px 12px 16px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
        }
        .card .card-icon { font-size: 32px; margin-bottom: 8px; color: #1976d2; }
        .card .card-title { font-weight: bold; font-size: 17px; margin-bottom: 4px; }
        .card .card-meta { font-size: 13px; color: #1976d2; margin-bottom: 8px; }
        .card .card-actions { margin-top: 8px; display: flex; gap: 10px; }
        .card .card-actions button {
            background: #e3eaf2; color: #1976d2; border: none; border-radius: 4px; padding: 4px 10px; font-size: 13px; cursor: pointer;
        }
        .card .card-actions button:hover { background: #1976d2; color: #fff; }
        /* 个人信息 */
        .info-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
        .info-table td { padding: 8px 6px; border-bottom: 1px solid #e3eaf2; }
        .info-table .label { color: #1976d2; font-weight: bold; width: 90px; }
        .info-edit { margin-bottom: 18px; }
        .info-edit input { width: 220px; }
        .password-box { background: #f6fbff; border-radius: 8px; padding: 16px; margin-top: 18px; }
        .msg { text-align: center; color: #d32f2f; margin-bottom: 10px; }
        .success { color: #388e3c; }
        /* 头像样式优化 */
        #avatarPreview, #avatarImg {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            background: none;
            box-shadow: none;
        }
        /* 荣誉统计概览 */
        .honor-summary {
            display: flex;
            gap: 18px;
            margin-bottom: 18px;
            flex-wrap: wrap;
        }
        .summary-card {
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 18px 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1;
            min-width: 180px;
        }
        .summary-card .summary-icon {
            font-size: 40px;
            margin-bottom: 10px;
            color: #1976d2;
        }
        .summary-card .summary-value {
            font-size: 28px;
            font-weight: bold;
            color: #1976d2;
            margin-bottom: 5px;
        }
        .summary-card .summary-label {
            font-size: 14px;
            color: #555;
        }
        .glass {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        /* 荣誉卡片 */
        .card .card-ribbon {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-left: 20px solid #1976d2;
            border-bottom: 20px solid transparent;
            z-index: 1;
        }
        .card .card-title {
            font-weight: bold;
            font-size: 17px;
            margin-bottom: 4px;
            color: #333;
        }
        .card .card-meta {
            font-size: 13px;
            color: #555;
            margin-bottom: 8px;
            display: flex;
            gap: 8px;
        }
        .card .card-meta span {
            font-size: 16px;
        }
        .card .card-badge {
            background: #e3eaf2;
            color: #1976d2;
            padding: 4px 8px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: bold;
        }
        .card .card-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 3em; /* 2行 */
            min-height: 3em;
            white-space: normal;
            display: flex;
            align-items: center; /* 垂直居中 */
            position: relative;
        }
        .card-desc .desc-empty {
            color: #bbb;
            width: 100%;
            text-align: left;
            line-height: 1.5;
            min-height: 3em;
            display: flex;
            align-items: center;
        }
        .card-desc.expanded {
            max-height: none;
            min-height: 3.6em;
        }
        .card .card-desc a {
            color: #1976d2;
            text-decoration: none;
            font-weight: bold;
        }
        .card .card-cert {
            width: 100% !important;
            max-width: 260px !important;
            height: 130px !important;
            object-fit: cover !important;
            border-radius: 8px !important;
            margin: 12px auto 10px auto !important;
            display: block !important;
            background: #f6fbff !important;
            box-shadow: 0 2px 8px rgba(25,118,210,0.07) !important;
            transition: transform 0.22s cubic-bezier(.4,1.4,.6,1);
        }
        .honor-card .card-cert:hover {
            transform: scale(1.06);
            z-index: 2;
            box-shadow: 0 6px 18px rgba(25,118,210,0.13) !important;
        }
        @media (max-width: 600px) {
            .honor-card .card-cert {
                max-width: 100% !important;
                height: 100px !important;
            }
        }
        /* 加载动画 */
        .honor-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200px;
            background: rgba(255,255,255,0.5);
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .honor-loading .wave {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #1976d2;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* 空状态 */
        .honor-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 0;
            color: #888;
            font-size: 16px;
        }
        .honor-empty img {
            margin-bottom: 12px;
        }
        /* 荣誉详情模态框 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background-color: #fefefe;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.12);
            width: 90%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            padding: 28px 24px 18px 24px;
        }
        .modal-left {
            flex: 1;
            margin-right: 20px;
        }
        .modal-right {
            text-align: center;
        }
        .modal-title {
            font-size: 22px;
            font-weight: bold;
            color: #1976d2;
            margin-bottom: 8px;
        }
        .modal-meta {
            font-size: 15px;
            color: #555;
            margin-bottom: 12px;
        }
        .modal-desc {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 20px;
            text-align: justify;
        }
        .modal-cert-img {
            width: 100%;
            max-height: 300px;
            object-fit: contain;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .modal-btn {
            background: linear-gradient(90deg, #1976d2 0%, #4fc3f7 100%);
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .modal-btn:hover {
            background: #1256a6;
        }
        .modal-close {
            position: absolute;
            right: 14px;
            top: 14px;
            width: 22px;
            height: 22px;
            cursor: pointer;
        }
        .modal-close img {
            width: 100%;
            height: 100%;
        }
        /* 删除确认弹窗 */
        #deleteConfirmModal .modal-content {
            max-width: 320px;
        }
        #deleteConfirmModal .modal-content .modal-btn {
            padding: 10px 20px;
        }
        #avatarPreview {
            width: 90px !important;
            height: 90px !important;
            margin-bottom: 12px;
        }
        #avatarFile {
            display: block;
            width: 200px;
            font-size: 15px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 8px;
        }
        /* 让荣誉类型下拉框与颁发日期输入框左右对齐 */
        #honorType {
          width: 100%;
          min-width: 0;
          box-sizing: border-box;
        }
        #honorDate {
          width: 100%;
          min-width: 0;
          box-sizing: border-box;
        }
        .form-row.honor-meta {
          display: flex;
          gap: 18px;
        }
        .form-row.honor-meta .form-group {
          flex: 1;
          min-width: 120px;
        }
        .form-row.honor-meta .form-group.issuer {
          margin-right: 18px;
        }
        .form-row.honor-meta .form-group.date {
          flex: 1.2;
        }
        @media (max-width: 900px) {
          .form-row.honor-meta { flex-wrap: wrap; }
          .form-row.honor-meta .form-group { min-width: 180px; }
          .form-row.honor-meta .form-group.issuer { margin-right: 0; }
        }
        .form-honor-container {
          max-width: 1000px;
          width: 100%;
          margin: 0 auto 18px auto;
        }
        #honorTitle, #honorDesc {
          width: 100%;
          box-sizing: border-box;
        }
        .form-row.honor-meta {
          width: 100%;
          display: flex;
          gap: 18px;
        }
        .form-row.honor-meta .form-group {
          flex: 1;
          min-width: 120px;
        }
        .form-row.honor-meta .form-group.issuer {
          margin-right: 18px;
        }
        .form-row.honor-meta .form-group.date {
          flex: 1;
        }
        @media (max-width: 900px) {
          .form-honor-container { max-width: 100%; }
          .form-row.honor-meta { flex-wrap: wrap; }
          .form-row.honor-meta .form-group { min-width: 180px; }
          .form-row.honor-meta .form-group.issuer { margin-right: 0; }
        }
        .form-file {
          width: 100%;
          box-sizing: border-box;
        }
        .honor-card-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        @media (max-width: 1200px) {
          .honor-card-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 900px) {
          .honor-card-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
          .honor-card-grid { grid-template-columns: 1fr; }
        }
        .honor-card {
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
          position: relative;
          overflow: hidden;
          transition: box-shadow 0.2s, transform 0.2s;
          cursor: pointer;
          min-height: 220px;
          display: flex;
          flex-direction: column;
          padding: 18px 18px 12px 18px;
        }
        .honor-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 16px rgba(0,0,0,0.10);
        }
        .honor-card .card-ribbon {
          height: 8px;
          width: 100%;
          position: absolute; top: 0; left: 0;
          border-radius: 8px 8px 0 0;
        }
        .card-ribbon.national { background: linear-gradient(90deg,#FFD700,#FFA500); }
        .card-ribbon.provincial { background: #e0e0e0; }
        .card-ribbon.school { background: #0d3b66; }
        .card-ribbon.other { background: #bdbdbd; }
        .honor-card .card-icon {
          position: absolute; left: 16px; top: 16px;
          font-size: 28px;
        }
        .honor-card .card-title {
          font-size: 18px; color: #0d3b66; font-weight: bold; margin: 24px 0 4px 0;
        }
        .honor-card .card-org { font-size: 14px; color: #555; }
        .honor-card .card-info {
          display: flex; align-items: center; gap: 10px; margin: 8px 0;
        }
        .card-badge { background: #FFD700; color: #fff; border-radius: 12px; padding: 2px 10px; font-size: 13px; }
        .card-badge.provincial { background: #e0e0e0; color: #333; }
        .card-badge.school { background: #0d3b66; color: #fff; }
        .card-badge.other { background: #bdbdbd; color: #fff; }
        .card-cert-thumb {
          width: 100%; height: 90px; object-fit: cover; border-radius: 6px; margin: 8px 0;
          box-shadow: 0 2px 8px rgba(0,0,0,0.06);
          position: relative;
          transition: box-shadow 0.2s;
        }
        .card-cert-thumb:hover {
          box-shadow: 0 4px 16px #FFD70055;
        }
        .card-cert-thumb:hover::after {
          content: '\\1F50D'; /* 放大镜图标 */
          position: absolute; right: 12px; bottom: 12px; font-size: 22px; color: #FFA500;
        }
        .card-desc {
          font-size: 14px; color: #666; line-height: 1.5; max-height: 4.5em; overflow: hidden;
        }
        .card-desc.more { max-height: none; }
        .card-desc .more-link { color: #FFA500; cursor: pointer; }
        .card-actions {
          display: flex; gap: 10px; margin-top: 8px; opacity: 0; transition: opacity 0.2s;
        }
        .honor-card:hover .card-actions { opacity: 1; }
        .card-actions button {
          background: none; border: none; cursor: pointer; font-size: 18px; color: #888; border-radius: 50%;
          transition: background 0.2s, color 0.2s;
        }
        .card-actions button:hover { background: #FFE082; color: #FFA500; }
        .honor-empty {
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          padding: 40px 0; color: #888; font-size: 16px;
        }
        .honor-empty .empty-title { font-size: 20px; color: #0d3b66; margin-top: 12px; }
        .honor-empty .empty-subtitle { font-size: 15px; color: #888; margin-bottom: 18px; }
        .honor-skeleton .honor-card.skeleton {
          background: linear-gradient(90deg,#f3f3f3 25%,#e9e9e9 37%,#f3f3f3 63%);
          background-size: 400% 100%;
          animation: skeleton-loading 1.2s ease-in-out infinite;
          min-height: 220px;
        }
        @keyframes skeleton-loading {
          0% { background-position: 100% 50%; }
          100% { background-position: 0 50%; }
        }
        .modal { /* 证书预览模态框样式略 */ }
        .honor-type-tabs {
          display: flex;
          gap: 18px;
          margin-bottom: 18px;
        }
        .honor-type-tab {
          padding: 7px 22px;
          border-radius: 18px;
          font-size: 16px;
          cursor: pointer;
          background: none;
          color: #1976d2;
          border: 1.5px solid transparent;
          transition: background 0.18s, color 0.18s, border 0.18s;
          user-select: none;
        }
        .honor-type-tab:hover {
          background: #e3eaf2;
          color: #1256a6;
          border: 1.5px solid #b6d0ee;
        }
        .honor-type-tab.active {
          background: #1976d2;
          color: #fff;
          border: 1.5px solid #1976d2;
          box-shadow: 0 2px 8px rgba(25,118,210,0.10);
        }
        .honor-filter-bar {
          margin-bottom: 20px;
        }
        .modal-cert-img {
            max-width: 360px;
            max-height: 260px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            margin: 0;
            background: none;
            box-shadow: none;
            border-radius: 0;
        }
        #honorDetailModal .modal-content {
          max-height: 80vh;
          overflow-y: auto;
        }
        /* 个人信息极简自然分布美化 */
        #section-profile {
          max-width: none;
          margin: 8px 0 0 12px;
          padding: 0 0 32px 0;
          background: none;
          box-shadow: none;
          border-radius: 0;
          position: relative;
          min-width: 340px;
        }
        @media (max-width: 900px) {
          #section-profile {
            margin: 4px 0 0 2px;
            min-width: 0;
            padding-right: 2vw;
          }
        }
        #section-profile .profile-title {
          font-size: 26px;
          font-weight: bold;
          background: linear-gradient(90deg, #1976d2 0%, #4fc3f7 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 32px;
          letter-spacing: 2px;
          text-align: left;
        }
        #section-profile .profile-info-row {
          font-size: 17px;
          color: #222;
          margin-bottom: 18px;
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
        }
        #section-profile .profile-label {
          color: #1976d2;
          font-weight: bold;
          min-width: 70px;
          margin-right: 8px;
          letter-spacing: 1px;
        }
        #section-profile .profile-value {
          color: #222;
          font-weight: normal;
        }
        #section-profile .info-edit {
          margin-bottom: 28px;
          display: flex;
          gap: 18px;
          align-items: center;
          flex-wrap: wrap;
        }
        #section-profile .info-edit label {
          color: #1976d2;
          font-size: 15px;
          margin-right: 6px;
        }
        #section-profile .info-edit input {
          width: 180px;
          border: 1.5px solid #b6d0ee;
          border-radius: 8px;
          padding: 7px 10px;
          font-size: 15px;
          margin-right: 12px;
          background: #f6fbff;
          transition: border 0.2s;
        }
        #section-profile .info-edit input:focus {
          border: 1.5px solid #1976d2;
          outline: none;
        }
        #section-profile .info-edit button {
          background: linear-gradient(90deg, #1976d2 0%, #4fc3f7 100%);
          color: #fff;
          border: none;
          border-radius: 8px;
          padding: 7px 22px;
          font-size: 15px;
          cursor: pointer;
          transition: background 0.2s;
        }
        #section-profile .info-edit button:hover {
          background: #1256a6;
        }
        #section-profile .password-box {
          background: none;
          border-radius: 0;
          box-shadow: none;
          padding: 18px 0 0 0;
          margin-top: 18px;
        }
        #section-profile .password-box b {
          color: #1976d2;
          font-size: 16px;
          margin-bottom: 8px;
          display: inline-block;
        }
        #section-profile .password-box label {
          color: #1976d2;
          font-size: 15px;
          margin-right: 6px;
        }
        #section-profile .password-box input {
          width: 160px;
          border: 1.5px solid #b6d0ee;
          border-radius: 8px;
          padding: 7px 10px;
          font-size: 15px;
          margin: 0 12px 10px 0;
          background: #f6fbff;
          transition: border 0.2s;
        }
        #section-profile .password-box input:focus {
          border: 1.5px solid #1976d2;
          outline: none;
        }
        #section-profile .password-box button {
          background: linear-gradient(90deg, #1976d2 0%, #4fc3f7 100%);
          color: #fff;
          border: none;
          border-radius: 8px;
          padding: 7px 22px;
          font-size: 15px;
          cursor: pointer;
          transition: background 0.2s;
        }
        #section-profile .password-box button:hover {
          background: #1256a6;
        }
        #section-profile .msg {
          text-align: left;
          margin-left: 8px;
          font-size: 14px;
        }
        @media (max-width: 700px) {
          #section-profile {
            padding: 18px 6vw 18px 6vw;
            max-width: 98vw;
          }
          #section-profile .profile-info-row {
            font-size: 15px;
          }
        }
        #section-profile .profile-info-row input[type="text"],
        #section-profile .profile-info-row input[type="email"] {
          width: 180px;
          border: 1.5px solid #b6d0ee;
          border-radius: 8px;
          padding: 7px 10px;
          font-size: 15px;
          margin-left: 8px;
          background: #f6fbff;
          transition: border 0.2s, box-shadow 0.2s;
          outline: none;
          box-shadow: 0 1.5px 6px rgba(25,118,210,0.07);
        }
        #section-profile .profile-info-row input[type="text"]:focus,
        #section-profile .profile-info-row input[type="email"]:focus {
          border: 1.5px solid #1976d2;
          box-shadow: 0 2px 8px rgba(25,118,210,0.13);
        }
        #section-profile .profile-info-row button[type="button"] {
          background: linear-gradient(90deg, #1976d2 0%, #4fc3f7 100%);
          color: #fff;
          border: none;
          border-radius: 8px;
          padding: 6px 18px;
          font-size: 15px;
          cursor: pointer;
          margin-left: 8px;
          transition: background 0.2s, box-shadow 0.2s;
          box-shadow: 0 1.5px 6px rgba(25,118,210,0.07);
        }
        #section-profile .profile-info-row button[type="button"]:hover {
          background: #1256a6;
          box-shadow: 0 2px 8px rgba(25,118,210,0.13);
        }
        #editHonorModal .modal-content {
          max-width: 900px !important;
          min-width: 420px !important;
          width: 98vw !important;
        }
        @media (max-width: 1000px) {
          #editHonorModal .modal-content {
            max-width: 99vw !important;
            min-width: 0 !important;
            padding: 12px 2vw !important;
          }
        }
        /* 荣誉卡片获奖等级和级别统一样式 */
        .honor-card .badge-row {
          display: flex;
          gap: 12px;
          margin-bottom: 10px;
          margin-top: 2px;
        }
        .honor-card .badge-row .card-badge {
          background: #e3eaf2;
          color: #1976d2;
          border-radius: 12px;
          padding: 4px 16px;
          font-size: 14px;
          font-weight: bold;
          min-width: 72px;
          text-align: center;
          box-sizing: border-box;
        }
        /* 荣誉卡片证书图片统一尺寸美观裁剪（强制生效） */
        .honor-card .card-cert {
          width: 100% !important;
          max-width: 260px !important;
          height: 130px !important;
          object-fit: cover !important;
          border-radius: 8px !important;
          margin: 12px auto 10px auto !important;
          display: block !important;
          background: #f6fbff !important;
          box-shadow: 0 2px 8px rgba(25,118,210,0.07) !important;
          transition: transform 0.22s cubic-bezier(.4,1.4,.6,1);
        }
        .honor-card .card-cert:hover {
            transform: scale(1.06);
            z-index: 2;
            box-shadow: 0 6px 18px rgba(25,118,210,0.13) !important;
        }
        @media (max-width: 600px) {
          .honor-card .card-cert {
            max-width: 100% !important;
            height: 100px !important;
          }
        }
        .settings-title {
          font-size: 22px;
          color: #1976d2;
          font-weight: bold;
          margin-bottom: 24px;
        }
        .settings-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .settings-list li {
          padding: 14px 0;
          border-bottom: 1px solid #e3eaf2;
        }
        .settings-list li:last-child {
          border-bottom: none;
        }
        .settings-list a {
          color: #1976d2;
          font-size: 16px;
          text-decoration: none;
          transition: color 0.18s;
        }
        .settings-list a:hover {
          color: #1256a6;
          text-decoration: underline;
        }
        .settings-list .danger a {
          color: #d32f2f;
        }
    </style>
</head>
<body>
<div class="layout">
    <div class="sidebar">
        <div class="logo"><img src="/static/imges/圆形.png" alt="logo"></div>
        <div style="font-size:18px;font-weight:bold;margin-bottom:18px;">学生信息管理系统</div>
        <div class="nav">
            <div class="nav-item active" data-section="honor-submit"><span>📝</span>荣誉提交</div>
            <div class="nav-item" data-section="honor-list"><span>🗂️</span>我的荣誉库</div>
            <div class="nav-item" data-section="profile"><span>👤</span>个人信息</div>
            <div class="nav-item" data-section="settings"><span>⚙️</span>账号设置</div>
            <div class="nav-item" id="nav-logout"><span>🚪</span>退出登录</div>
        </div>
    </div>
    <div class="main">
        <div class="topbar">
            <div class="title"><!-- <img src="../imges/郑科logo.png" alt="logo"> -->学生信息管理系统</div>
            <div class="userbar">
                <span class="welcome" id="welcomeMsg"></span>
                <span class="avatar" id="avatarBox"><img src="/static/imges/个人头像.png" alt="avatar" id="avatarImg" title="更换头像"></span>
                <button class="logout-btn" onclick="logout()">退出</button>
            </div>
        </div>
        <div class="content">
            <!-- 荣誉提交 -->
            <div class="section active" id="section-honor-submit">
                <form id="honorForm" onsubmit="return submitHonor(event)">
                    <div class="form-honor-container">
                        <div class="form-group">
                            <label class="form-label">赛事名称</label>
                            <input class="form-input" type="text" id="honorTitle" required placeholder="请输入赛事名称">
                        </div>
                        <div class="form-row honor-meta">
                            <div class="form-group">
                                <label class="form-label">荣誉类型</label>
                                <select class="form-select" id="honorType" required>
                                    <option value="">请选择</option>
                                    <option value="学科竞赛">学科竞赛</option>
                                    <option value="文体活动">文体活动</option>
                                    <option value="社会实践">社会实践</option>
                                    <option value="创新创业">创新创业</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">获奖级别</label>
                                <select class="form-select" id="honorRank" required>
                                    <option value="">请选择</option>
                                    <option value="国家级">国家级</option>
                                    <option value="省级">省级</option>
                                    <option value="市级">市级</option>
                                    <option value="校级">校级</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">获奖等级</label>
                                <select class="form-select" id="honorLevel" required onchange="toggleLevelOther()">
                                    <option value="">请选择</option>
                                    <option value="特等奖">特等奖</option>
                                    <option value="一等奖">一等奖</option>
                                    <option value="二等奖">二等奖</option>
                                    <option value="三等奖">三等奖</option>
                                    <option value="金奖">金奖</option>
                                    <option value="银奖">银奖</option>
                                    <option value="铜奖">铜奖</option>
                                    <option value="其他">其他</option>
                                </select>
                                <input class="form-input" type="text" id="honorLevelOther" placeholder="下拉菜单未包含的获奖等级说明" style="display:none;margin-top:8px;">
                            </div>
                            <div class="form-group issuer">
                                <label class="form-label">颁发机构</label>
                                <input class="form-input" type="text" id="honorOrg" placeholder="请输入颁发机构" required>
                            </div>
                            <div class="form-group date">
                                <label class="form-label">颁发日期</label>
                                <input class="form-date" type="date" id="honorDate" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">荣誉描述</label>
                            <textarea class="form-textarea" id="honorDesc" rows="3" placeholder="请输入详细描述..."></textarea>
                        </div>
                        <!-- 证书上传表单项包裹在.form-honor-container内 -->
                        <div class="form-honor-container">
                            <div class="form-group">
                                <label class="form-label">上传奖项证明材料</label>
                                <input class="form-file" type="file" id="honorCertFile" accept="image/*" required>
                            </div>
                        </div>
                    </div>
                    <button class="form-submit" type="submit">提交荣誉</button>
                    <div class="msg" id="honorMsg"></div>
                </form>
            </div>
            <!-- 我的荣誉库 -->
            <div class="section" id="section-honor-list">
                <!-- 分类导航栏 -->
                <div class="honor-type-tabs">
                    <span class="honor-type-tab active" data-type="">全部</span>
                    <span class="honor-type-tab" data-type="学科竞赛">学科竞赛</span>
                    <span class="honor-type-tab" data-type="文体活动">文体活动</span>
                    <span class="honor-type-tab" data-type="社会实践">社会实践</span>
                    <span class="honor-type-tab" data-type="创新创业">创新创业</span>
                    <span class="honor-type-tab" data-type="其他">其他</span>
                </div>
                <!-- 统计概览区 -->
                <div class="honor-summary">
                    <div class="summary-card glass" id="summary-total">
                        <div class="summary-icon">🏆</div>
                        <div class="summary-value" id="summaryTotal">0</div>
                        <div class="summary-label">荣誉总数</div>
                    </div>
                    <div class="summary-card glass" id="summary-year">
                        <div class="summary-icon">📅</div>
                        <div class="summary-value" id="summaryYear">0</div>
                        <div class="summary-label">本年度新增</div>
                    </div>
                    <div class="summary-card glass" id="summary-highest">
                        <div class="summary-icon">⭐</div>
                        <div class="summary-value" id="summaryHighest">-</div>
                        <div class="summary-label">最高级别</div>
                    </div>
                </div>
                <!-- 筛选与排序区 -->
                <div class="honor-filter-bar">
                    <span class="honor-count">显示<span id="honorCount">0</span>项荣誉</span>
                </div>
                <!-- 加载骨架屏 -->
                <div class="honor-skeleton" id="honorSkeleton" style="display:none;">
                    <div class="honor-card skeleton"></div>
                    <div class="honor-card skeleton"></div>
                    <div class="honor-card skeleton"></div>
                    <div class="honor-card skeleton"></div>
                </div>
                <!-- 荣誉卡片网格 -->
                <div class="honor-card-grid" id="myHonorList"></div>
                <!-- 空状态 -->
                <div class="honor-empty" id="honorEmpty" style="display:none;">
                    <img src="/static/imges/新增新建操作.png" style="width:120px;margin-bottom:12px;">
                    <div class="empty-title">尚未添加任何荣誉</div>
                    <div class="empty-subtitle">开始记录您的学术成就</div>
                    <button class="form-submit" onclick="showHonorSubmit()" style="background:linear-gradient(90deg,#FFD700,#FFA500);color:#fff;">添加第一个荣誉</button>
                </div>
                <!-- 荣誉详情模态框 -->
                <div id="honorDetailModal" class="modal" style="display:none;">
                    <div class="modal-content" style="max-width:480px;min-width:320px;">
                        <span class="modal-close" onclick="closeHonorDetail()"><img src="/static/imges/叉号.png" style="width:22px;"></span>
                        <div style="width:100%;text-align:center;margin-bottom:10px;">
                            <div class="modal-title" id="detailTitle" style="font-size:22px;font-weight:bold;color:#1976d2;"></div>
                            <div class="modal-meta" id="detailMeta" style="font-size:15px;color:#555;margin-bottom:8px;"></div>
                        </div>
                        <table style="width:100%;font-size:15px;color:#333;margin-bottom:10px;line-height:1.7;">
                            <tr><td style="color:#1976d2;width:90px;">荣誉类型</td><td id="detailType"></td></tr>
                            <tr><td style="color:#1976d2;">获奖级别</td><td id="detailRank"></td></tr>
                            <tr><td style="color:#1976d2;">获奖等级</td><td id="detailLevel"></td></tr>
                            <tr><td style="color:#1976d2;">颁发机构</td><td id="detailOrg"></td></tr>
                            <tr><td style="color:#1976d2;">颁发日期</td><td id="detailDate"></td></tr>
                            <tr><td style="color:#1976d2;vertical-align:top;">荣誉描述</td><td id="detailDesc" style="vertical-align:top;"></td></tr>
                            <tr><td style="color:#1976d2;width:90px;vertical-align:top;">证明材料</td><td id="detailCertCell"></td></tr>
                            <tr><td></td><td><a id="downloadCertBtn" href="#" download style="display:block;text-align:left;margin-top:2px;color:#1976d2;text-decoration:underline;font-size:15px;">下载证书</a></td></tr>
                        </table>
                        <button class="modal-btn" onclick="closeHonorDetail()">关闭</button>
                    </div>
                </div>
                <!-- 删除确认弹窗 -->
                <div id="deleteConfirmModal" class="modal" style="display:none;">
                    <div class="modal-content" style="max-width:320px;">
                        <span class="modal-close" onclick="closeDeleteConfirm()"><img src="/static/imges/叉号.png" style="width:22px;"></span>
                        <div style="font-size:18px;text-align:center;margin:18px 0;">确定要删除该荣誉吗？</div>
                        <div style="display:flex;gap:18px;justify-content:center;width:150px;height:60px">
                            <button class="form-submit" style="background:#d32f2f;" onclick="confirmDeleteHonor()">删除</button>
                            <button class="form-submit" onclick="closeDeleteConfirm()">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 个人信息 -->
            <div class="section" id="section-profile">
                <div class="profile-title">个人信息</div>
                <div class="profile-info-row"><span class="profile-label">姓名</span><span class="profile-value" id="info-name"></span></div>
                <div class="profile-info-row"><span class="profile-label">性别</span><span class="profile-value" id="info-gender"></span></div>
                <div class="profile-info-row"><span class="profile-label">学号</span><span class="profile-value" id="info-username"></span></div>
                <div class="profile-info-row"><span class="profile-label">院系</span><span class="profile-value" id="info-department"></span></div>
                <div class="profile-info-row"><span class="profile-label">班级</span><span class="profile-value" id="info-class"></span></div>
                <div class="profile-info-row">
  <span class="profile-label">电话</span>
  <span class="profile-value" id="info-phone-show">无</span>
  <input type="text" id="info-phone" style="display:none;width:180px;">
  <button id="editPhoneBtn" type="button" style="margin-left:10px;">编辑</button>
  <button id="savePhoneBtn" type="button" style="display:none;margin-left:10px;">保存</button>
  <span class="msg" id="phoneMsg" style="margin-left:8px;"></span>
                </div>
<div class="profile-info-row">
  <span class="profile-label">邮箱</span>
  <span class="profile-value" id="info-email-show">无</span>
  <input type="email" id="info-email" style="display:none;width:180px;">
  <button id="editEmailBtn" type="button" style="margin-left:10px;">编辑</button>
  <button id="saveEmailBtn" type="button" style="display:none;margin-left:10px;">保存</button>
  <span class="msg" id="emailMsg" style="margin-left:8px;"></span>
</div>
                <div class="info-edit" style="display:none;"></div>
                <div class="password-box">
                    <b>修改密码</b><br>
                    <label>原密码：</label><input type="password" id="oldPwd"><br>
                    <label>新密码：</label><input type="password" id="newPwd"><br>
                    <label>确认新密码：</label><input type="password" id="confirmPwd"><br>
                    <button onclick="changePwd()">修改密码</button>
                    <span class="msg" id="pwdMsg"></span>
                </div>
            </div>
            <!-- 账号设置（可扩展） -->
            <div class="section" id="section-settings">
                <div class="settings-title">账号设置</div>
                <ul class="settings-list">
                    <li><a href="#" onclick="showChangePwd()">修改密码</a></li>
                    <li><a href="#" onclick="logoutAll()">退出所有设备</a></li>
                    <li class="danger"><a href="#" onclick="showDeleteAccount()">注销账号</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 更换头像弹窗 -->
<div id="avatarModal" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.12);width:340px;max-width:92vw;padding:18px 14px 14px 14px;position:relative;min-height:260px;display:flex;flex-direction:column;align-items:center;">
    <img src="/static/imges/叉号.png" alt="关闭" id="closeAvatarModal" style="position:absolute;right:14px;top:14px;width:22px;height:22px;cursor:pointer;">
    <div style="font-size:19px;font-weight:bold;text-align:center;margin-bottom:14px;">更换头像</div>
    <div style="display:flex;flex-direction:column;align-items:center;width:100%;">
      <img id="avatarPreview" src="/static/imges/个人头像.png" alt="预览" style="width:90px;height:90px;margin-bottom:12px;">
      <input type="file" id="avatarFile" accept="image/*" style="margin-bottom:8px;display:block;width:200px;font-size:15px;margin-left:auto;margin-right:auto;">
      <div style="display:flex;gap:12px;justify-content:center;width:100%;margin-top:4px;">
        <button id="uploadAvatarBtn" style="background:#1976d2;color:#fff;border:none;border-radius:5px;padding:8px 18px;font-size:15px;cursor:pointer;">上传</button>
        <button id="confirmAvatarBtn" style="background:#4fc3f7;color:#fff;border:none;border-radius:5px;padding:8px 18px;font-size:15px;cursor:pointer;">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 证书预览模态框 -->
<div class="modal" id="certModal" style="display:none;">
  <div class="modal-bg" onclick="closeCertModal()"></div>
  <div class="modal-content">
    <img id="certModalImg" src="" alt="证书大图">
    <div class="modal-toolbar">
      <button onclick="downloadCert()">下载</button>
      <!-- 可扩展放大/缩小/旋转等 -->
    </div>
  </div>
</div>
<!-- 荣誉详情模态框下方添加编辑按钮 -->
<div id="editHonorModal" class="modal" style="display:none;">
  <div class="modal-content" style="max-width:480px;min-width:320px;">
    <span class="modal-close" onclick="closeEditHonor()"><img src="/static/imges/叉号.png" style="width:22px;"></span>
    <div style="width:100%;text-align:center;margin-bottom:10px;">
      <div class="modal-title" id="editHonorTitle" style="font-size:22px;font-weight:bold;color:#1976d2;">编辑荣誉</div>
    </div>
    <form id="editHonorForm" onsubmit="return submitEditHonor(event)">
      <div class="form-group"><label class="form-label">赛事名称</label><input class="form-input" type="text" id="edit-title" required></div>
      <div class="form-row honor-meta">
        <div class="form-group"><label class="form-label">荣誉类型</label><select class="form-select" id="edit-type" required><option value="">请选择</option><option value="学科竞赛">学科竞赛</option><option value="文体活动">文体活动</option><option value="社会实践">社会实践</option><option value="创新创业">创新创业</option><option value="其他">其他</option></select></div>
        <div class="form-group"><label class="form-label">获奖级别</label><select class="form-select" id="edit-rank" required><option value="">请选择</option><option value="国家级">国家级</option><option value="省级">省级</option><option value="市级">市级</option><option value="校级">校级</option><option value="其他">其他</option></select></div>
        <div class="form-group"><label class="form-label">获奖等级</label><select class="form-select" id="edit-level" required><option value="">请选择</option><option value="特等奖">特等奖</option><option value="一等奖">一等奖</option><option value="二等奖">二等奖</option><option value="三等奖">三等奖</option><option value="金奖">金奖</option><option value="银奖">银奖</option><option value="铜奖">铜奖</option><option value="其他">其他</option></select></div>
        <div class="form-group issuer"><label class="form-label">颁发机构</label><input class="form-input" type="text" id="edit-org" required></div>
        <div class="form-group date"><label class="form-label">颁发日期</label><input class="form-date" type="date" id="edit-date" required></div>
      </div>
      <div class="form-group"><label class="form-label">荣誉描述</label><textarea class="form-textarea" id="edit-desc" rows="3"></textarea></div>
      <div class="form-group"><label class="form-label">奖项证明材料</label><input class="form-file" type="file" id="edit-cert"></div>
      <button class="form-submit" type="submit">保存修改</button>
      <div class="msg" id="editHonorMsg"></div>
    </form>
  </div>
</div>
<script>
let currentHonorType = '';
function getToken() {
    return localStorage.getItem('token') || '';
}
let studentName = '';

// 页面加载时强制校验 token
if (!localStorage.getItem('token')) {
    window.location.replace('/static/index.html');
}

// 左侧导航切换
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
    item.onclick = function() {
        navItems.forEach(i=>i.classList.remove('active'));
        this.classList.add('active');
        document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
        let sec = this.dataset.section;
        if(sec) document.getElementById('section-'+sec).classList.add('active');
        if(sec==='honor-list') loadMyHonors();
        if(sec==='profile') loadProfile();
    };
});
document.getElementById('nav-logout').onclick = logout;

function logout() {
    localStorage.removeItem('token');
    location.replace('/static/index.html');
}

// 顶部欢迎信息
function setWelcome(name) {
    const hour = new Date().getHours();
    let greeting = '';
    if (hour >= 5 && hour < 12) {
        greeting = '早上好';
    } else if (hour >= 12 && hour < 18) {
        greeting = '下午好';
    } else {
        greeting = '晚上好';
    }
    document.getElementById('welcomeMsg').textContent = `${greeting}，${name}！`;
}

// 荣誉提交
function submitHonor(event) {
    event.preventDefault();
    let title = document.getElementById('honorTitle').value.trim();
    let type = document.getElementById('honorType').value;
    let levelSel = document.getElementById('honorLevel').value;
    let levelOther = document.getElementById('honorLevelOther').value.trim();
    let level = (levelSel === '其他') ? levelOther : levelSel;
    let rank = document.getElementById('honorRank').value;
    let date = document.getElementById('honorDate').value;
    let org = document.getElementById('honorOrg').value.trim();
    let desc = document.getElementById('honorDesc').value.trim();
    let fileInput = document.getElementById('honorCertFile');
    let file = fileInput.files[0];
    // JS 校验提示
    if(!title || !type || !level || !rank || !date || !org) {
        document.getElementById('honorMsg').textContent = '请填写完整信息（赛事名称等必填）';
        return false;
    }
    let formData = new FormData();
    formData.append('title', title);
    formData.append('honor_type', type);
    formData.append('level', level);
    formData.append('rank', rank);
    formData.append('date', date);
    formData.append('organization', org);
    formData.append('description', desc);
    if(file) formData.append('certificate', file);
    fetch('/api/student/honor', {
        method: 'POST',
        headers: { 'Authorization': getToken() },
        body: formData
    }).then(r=>r.json()).then(res=>{
        let msg = document.getElementById('honorMsg');
        if(res.code === 200) {
            msg.textContent = '提交成功';
            msg.className = 'msg success';
            document.getElementById('honorForm').reset();
            toggleLevelOther();
        } else {
            msg.textContent = res.msg;
            msg.className = 'msg';
        }
    });
    return false;
}

// 我的荣誉库
function loadHonorSummary() {
  fetch('/api/student/honor/summary', {headers: {'Authorization': getToken()}})
    .then(r=>r.json()).then(res=>{
      if(res.code===200){
        document.getElementById('summaryTotal').textContent = res.total;
        document.getElementById('summaryYear').textContent = res.year_count;
        document.getElementById('summaryHighest').textContent = res.highest || '-';
      }
    });
}
const honorTypeTabs = document.querySelectorAll('.honor-type-tab');
honorTypeTabs.forEach(tab => {
    tab.onclick = function() {
        honorTypeTabs.forEach(t=>t.classList.remove('active'));
        this.classList.add('active');
        currentHonorType = this.dataset.type;
        loadMyHonors();
    };
});

function loadMyHonors() {
  document.getElementById('honorSkeleton').style.display = 'flex';
  document.getElementById('myHonorList').innerHTML = '';
  document.getElementById('honorEmpty').style.display = 'none';
    let type = currentHonorType || '';
    fetch(`/api/student/honor/mine?type=${encodeURIComponent(type)}`, {
        headers: { 'Authorization': getToken() }
  }).then(r=>r.json()).then(res=>{
    document.getElementById('honorSkeleton').style.display = 'none';
    let list = document.getElementById('myHonorList');
        let countElem = document.getElementById('honorCount');
    if(res.code === 200) {
      if(res.honors.length === 0) {
        document.getElementById('honorEmpty').style.display = 'flex';
                countElem.textContent = 0;
      } else {
                list.innerHTML = res.honors.map(h=>{
                    let certUrl = h.certificate_url || '';
                    let isImg = /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(certUrl);
                    let certImg = isImg && certUrl ? `<img class='card-cert' src='${certUrl}' onclick='showCertImg(\"${certUrl}\")'>` : `<img class='card-cert' src='/static/imges/honor.jpg' onclick='showCertImg(\"/static/imges/honor.jpg\")'>`;
                    let descHtml = '';
                    if(!h.description || h.description.trim() === ''){
                      descHtml = `<span class='desc-empty'>无描述</span>`;
                    }else if(h.description.length > 30){
                      // 只显示前两行（约30字），后面加展开
                      descHtml = `${h.description.slice(0,30)}... <a href='javascript:void(0)' onclick='showHonorDetail(${h.id})' style='color:#1976d2;text-decoration:underline;'>展开</a>`;
                    }else{
                      descHtml = h.description;
                    }
                    return `
                        <div class='honor-card' data-level='${h.level||''}'>
                            <div class='card-title' style="cursor:pointer;color:#1976d2;text-decoration:underline;" onclick='showHonorDetail(${h.id})'>${h.title}</div>
            <div class='card-meta'>
                                ${h.honor_type||''}<br>
                                ${h.date||''}
                            </div>
                            <div class='badge-row'>
                                <span class='card-badge'>${h.rank||''}</span>
              <span class='card-badge'>${h.level||''}</span>
            </div>
                            <div class='card-desc' id='desc-${h.id}'>${descHtml}</div>
                            ${certImg}
            <div class='card-actions'>
              <button title='编辑' onclick='editHonor(${h.id})'>✏️</button>
              <button title='删除' onclick='showDeleteConfirm(${h.id})'>🗑️</button>
            </div>
          </div>
                    `;
                }).join('');
                countElem.textContent = res.honors.length;
      }
    }
  });
}
function expandDesc(id){
  document.getElementById('desc-'+id).classList.add('expanded');
}
function showHonorSubmit(){
  document.querySelector('[data-section="honor-submit"]').click();
}
function showCertImg(url){
  window.open(url, '_blank');
}
function showDeleteConfirm(id){
  window._deleteHonorId = id;
  document.getElementById('deleteConfirmModal').style.display = 'flex';
}
function closeDeleteConfirm(){
  document.getElementById('deleteConfirmModal').style.display = 'none';
}
function confirmDeleteHonor(){
  let id = window._deleteHonorId;
  fetch(`/api/student/honor/delete/${id}`, {
    method:'POST', headers:{'Authorization':getToken()}
  }).then(r=>r.json()).then(res=>{
    if(res.code===200){
      closeDeleteConfirm();
      loadHonorSummary();
      loadMyHonors();
    }
  });
}
function showHonorDetail(id){
  fetch(`/api/student/honor/detail/${id}`, {headers:{'Authorization':getToken()}})
    .then(r=>r.json()).then(res=>{
      if(res.code===200){
        let h = res.honor;
        document.getElementById('detailTitle').textContent = h.title;
        document.getElementById('detailMeta').textContent = '';
        document.getElementById('detailType').textContent = h.honor_type||'';
        document.getElementById('detailRank').textContent = h.rank||'';
        document.getElementById('detailLevel').textContent = h.level||'';
        document.getElementById('detailOrg').textContent = h.organization||'';
        document.getElementById('detailDate').textContent = h.date||'';
        if(!h.description || h.description.trim() === ''){
          document.getElementById('detailDesc').innerHTML = '<span style="color:#bbb;">无描述</span>';
        }else{
          document.getElementById('detailDesc').textContent = h.description;
        }
        // 证明材料渲染
        let certUrl = h.certificate_url||'';
        let isImg = /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(certUrl);
        let certCell = document.getElementById('detailCertCell');
        if(certUrl && isImg){
          certCell.innerHTML = `<img src='${certUrl}' class='modal-cert-img'>`;
        }else if(certUrl){
          let fname = certUrl.split('/').pop();
          certCell.innerHTML = `<b>${fname}</b>`;
        }else{
          certCell.innerHTML = '';
        }
        document.getElementById('downloadCertBtn').href = certUrl||'#';
        document.getElementById('honorDetailModal').style.display = 'flex';
      }
    });
}
function closeHonorDetail(){
  document.getElementById('honorDetailModal').style.display = 'none';
}
// 个人信息
function loadProfile() {
    fetch('/api/student/info', {
        headers: { 'Authorization': getToken() }
    }).then(r=>r.json()).then(res=>{
        if(res.code === 200) {
            let u = res.user;
            studentName = u.name;
            setWelcome(studentName);
            document.getElementById('info-username').textContent = u.username;
            document.getElementById('info-name').textContent = u.name;
            document.getElementById('info-gender').textContent = u.gender || '';
            document.getElementById('info-department').textContent = u.department || '';
            document.getElementById('info-class').textContent = u.class_name;
            document.getElementById('info-phone-show').textContent = u.phone ? u.phone : '无';
            document.getElementById('info-email-show').textContent = u.email ? u.email : '无';
            document.getElementById('info-phone').value = u.phone || '';
            document.getElementById('info-email').value = u.email || '';
            document.getElementById('avatarImg').src = (u.avatar_url ? (u.avatar_url + '?t=' + Date.now()) : '/static/imges/个人头像.png');
            // 恢复为展示模式
            document.getElementById('info-phone-show').style.display = '';
            document.getElementById('info-phone').style.display = 'none';
            document.getElementById('editPhoneBtn').style.display = '';
            document.getElementById('savePhoneBtn').style.display = 'none';
            document.getElementById('phoneMsg').textContent = '';
            document.getElementById('info-email-show').style.display = '';
            document.getElementById('info-email').style.display = 'none';
            document.getElementById('editEmailBtn').style.display = '';
            document.getElementById('saveEmailBtn').style.display = 'none';
            document.getElementById('emailMsg').textContent = '';
        }
    });
}
function saveProfile() {
    let phone = document.getElementById('info-phone').value.trim();
    let email = document.getElementById('info-email').value.trim();
    fetch('/api/student/profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': getToken() },
        body: JSON.stringify({phone, email})
    }).then(r=>r.json()).then(res=>{
        let msg = document.getElementById('profileMsg');
        if(res.code === 200) {
            msg.textContent = '保存成功';
            msg.className = 'msg success';
            loadProfile(); // 保存成功后刷新展示
        } else {
            msg.textContent = res.msg;
            msg.className = 'msg';
        }
    });
}
function changePwd() {
    let oldPwd = document.getElementById('oldPwd').value;
    let newPwd = document.getElementById('newPwd').value;
    let confirmPwd = document.getElementById('confirmPwd').value;
    let pwdMsg = document.getElementById('pwdMsg');
    if(!oldPwd || !newPwd || !confirmPwd) {
        pwdMsg.textContent = '请填写完整';
        pwdMsg.className = 'msg';
        return;
    }
    if(newPwd !== confirmPwd) {
        pwdMsg.textContent = '两次新密码不一致';
        pwdMsg.className = 'msg';
        return;
    }
    fetch('/api/student/password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': getToken() },
        body: JSON.stringify({old_password: oldPwd, new_password: newPwd})
    }).then(r=>r.json()).then(res=>{
        if(res.code === 200) {
            pwdMsg.textContent = '修改成功';
            pwdMsg.className = 'msg success';
            document.getElementById('oldPwd').value = '';
            document.getElementById('newPwd').value = '';
            document.getElementById('confirmPwd').value = '';
        } else {
            pwdMsg.textContent = res.msg;
            pwdMsg.className = 'msg';
        }
    }).catch(()=>{
        pwdMsg.textContent = '网络错误，请重试';
        pwdMsg.className = 'msg';
    });
}
// 荣誉级别下拉菜单逻辑
function toggleLevelOther() {
    var sel = document.getElementById('honorLevel');
    var other = document.getElementById('honorLevelOther');
    if(sel.value === '其他') {
        other.style.display = '';
        other.required = true;
    } else {
        other.style.display = 'none';
        other.required = false;
    }
}
// 头像更换弹窗逻辑
const avatarBox = document.getElementById('avatarBox');
const avatarModal = document.getElementById('avatarModal');
const closeAvatarModal = document.getElementById('closeAvatarModal');
const avatarFile = document.getElementById('avatarFile');
const avatarPreview = document.getElementById('avatarPreview');
const uploadAvatarBtn = document.getElementById('uploadAvatarBtn');
const confirmAvatarBtn = document.getElementById('confirmAvatarBtn');
const avatarImg = document.getElementById('avatarImg');
let tempAvatarUrl = avatarImg ? avatarImg.src : '/static/imges/个人头像.png';

avatarBox.onclick = function() {
    avatarModal.style.display = 'flex';
    avatarPreview.src = avatarImg.src;
    tempAvatarUrl = avatarImg.src;
    avatarFile.value = '';
};
closeAvatarModal.onclick = function() {
    avatarModal.style.display = 'none';
};
// 点击遮罩关闭
avatarModal.onclick = function(e) {
    if(e.target === avatarModal) avatarModal.style.display = 'none';
};
// 上传按钮：预览图片
uploadAvatarBtn.onclick = function() {
    if(avatarFile.files && avatarFile.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            avatarPreview.src = e.target.result;
            tempAvatarUrl = e.target.result;
        };
        reader.readAsDataURL(avatarFile.files[0]);
    }
};
// 确定按钮：更换头像
confirmAvatarBtn.onclick = function() {
    if(avatarFile.files && avatarFile.files[0]) {
        let formData = new FormData();
        formData.append('avatar', avatarFile.files[0]);
        fetch('/api/student/avatar', {
            method: 'POST',
            headers: { 'Authorization': getToken() },
            body: formData
        }).then(r=>r.json()).then(res=>{
            if(res.code === 200 && res.avatar_url){
                avatarImg.src = res.avatar_url;
                avatarPreview.src = res.avatar_url;
                tempAvatarUrl = res.avatar_url;
                avatarModal.style.display = 'none';
                loadProfile();
            }else{
                alert(res.msg || '头像上传失败');
            }
        });
    } else {
        avatarModal.style.display = 'none';
    }
};
// 证书预览模态框逻辑
const certModal = document.getElementById('certModal');
const certModalImg = document.getElementById('certModalImg');
const closeCertModalBtn = document.querySelector('#certModal .modal-close');

function showCertModal(url) {
    certModalImg.src = url;
    certModal.style.display = 'flex';
}
function closeCertModal() {
    certModal.style.display = 'none';
}
function downloadCert() {
    const img = certModalImg;
    const a = document.createElement('a');
    a.href = img.src;
    a.download = 'certificate.jpg'; // 可以修改文件名
    a.click();
}

// 假设 honors 为后端API返回的荣誉数组
function renderHonorCards(honors) {
  const grid = document.getElementById('myHonorList');
  const empty = document.getElementById('honorEmpty');
  const count = document.getElementById('honorCount');
  if (!honors || honors.length === 0) {
    grid.innerHTML = '';
    empty.style.display = 'flex';
    count.textContent = 0;
    return;
  }
  empty.style.display = 'none';
  count.textContent = honors.length;
  grid.innerHTML = honors.map(h => {
    // ribbon和badge颜色
    let ribbon = 'other', badge = 'other';
    if (h.level === '国家级') ribbon = badge = 'national';
    else if (h.level === '省级') ribbon = badge = 'provincial';
    else if (h.level === '校级') ribbon = badge = 'school';
    // 图标
    let icon = '🏆';
    if (h.type === '学术类') icon = '📚';
    else if (h.type === '竞赛类') icon = '🏆';
    else if (h.type === '文体类') icon = '🎵';
    // 证书状态
    let certStatus = h.certificate_valid ? '<span class="card-badge" style="background:#43a047;">有效</span>' : '<span class="card-badge" style="background:#bdbdbd;">过期</span>';
    // 证书缩略图
    let certThumb = h.certificate_url ? `<img class="card-cert-thumb" src="${h.certificate_url}" onclick="showCertModal('${h.certificate_url}')">` : '';
    // 描述摘要
    let desc = h.description || '';
    let descShort = desc.length > 60 ? desc.slice(0, 60) + '...' : desc;
    let moreLink = desc.length > 60 ? `<span class="more-link" onclick="showHonorDetail(${h.id})">查看更多</span>` : '';
    return `
      <div class="honor-card" data-id="${h.id}">
        <div class="card-ribbon ${ribbon}"></div>
        <div class="card-icon">${icon}</div>
        <div class="card-title">${h.title}</div>
        <div class="card-org">${h.organization || ''}</div>
        <div class="card-info">
          <span><img src="../imges/calendar.svg" style="width:16px;vertical-align:-2px;"> ${h.date || ''}</span>
          <span class="card-badge ${badge}">${h.level || ''}</span>
          ${certStatus}
        </div>
        ${certThumb}
        <div class="card-desc">${descShort} ${moreLink}</div>
        <div class="card-actions">
          <button title="编辑" onclick="editHonor(${h.id})">✏️</button>
          <button title="删除" onclick="deleteHonor(${h.id})">🗑️</button>
          <button title="分享" onclick="shareHonor(${h.id})">🔗</button>
        </div>
      </div>
    `;
  }).join('');
}

// 证书模态框
function showCertModal(url) {
  document.getElementById('certModalImg').src = url;
  document.getElementById('certModal').style.display = 'flex';
}
function closeCertModal() {
  document.getElementById('certModal').style.display = 'none';
}
function downloadCert() {
  const img = document.getElementById('certModalImg');
  const a = document.createElement('a');
  a.href = img.src;
  a.download = 'certificate.jpg';
  a.click();
}

// JS逻辑：电话和邮箱编辑分离
function loadProfile() {
    fetch('/api/student/info', {
        headers: { 'Authorization': getToken() }
    }).then(r=>r.json()).then(res=>{
        if(res.code === 200) {
            let u = res.user;
            studentName = u.name;
            setWelcome(studentName);
            document.getElementById('info-username').textContent = u.username;
            document.getElementById('info-name').textContent = u.name;
            document.getElementById('info-gender').textContent = u.gender || '';
            document.getElementById('info-department').textContent = u.department || '';
            document.getElementById('info-class').textContent = u.class_name;
            document.getElementById('info-phone-show').textContent = u.phone ? u.phone : '无';
            document.getElementById('info-email-show').textContent = u.email ? u.email : '无';
            document.getElementById('info-phone').value = u.phone || '';
            document.getElementById('info-email').value = u.email || '';
            document.getElementById('avatarImg').src = (u.avatar_url ? (u.avatar_url + '?t=' + Date.now()) : '/static/imges/个人头像.png');
            // 恢复为展示模式
            document.getElementById('info-phone-show').style.display = '';
            document.getElementById('info-phone').style.display = 'none';
            document.getElementById('editPhoneBtn').style.display = '';
            document.getElementById('savePhoneBtn').style.display = 'none';
            document.getElementById('phoneMsg').textContent = '';
            document.getElementById('info-email-show').style.display = '';
            document.getElementById('info-email').style.display = 'none';
            document.getElementById('editEmailBtn').style.display = '';
            document.getElementById('saveEmailBtn').style.display = 'none';
            document.getElementById('emailMsg').textContent = '';
        }
    });
}
// 电话编辑
const editPhoneBtn = document.getElementById('editPhoneBtn');
const savePhoneBtn = document.getElementById('savePhoneBtn');
const infoPhoneShow = document.getElementById('info-phone-show');
const infoPhoneInput = document.getElementById('info-phone');
const phoneMsg = document.getElementById('phoneMsg');
editPhoneBtn.onclick = function() {
    infoPhoneShow.style.display = 'none';
    infoPhoneInput.style.display = '';
    editPhoneBtn.style.display = 'none';
    savePhoneBtn.style.display = '';
    infoPhoneInput.focus();
};
savePhoneBtn.onclick = function() {
    let phone = infoPhoneInput.value.trim();
    fetch('/api/student/profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': getToken() },
        body: JSON.stringify({phone})
    }).then(r=>r.json()).then(res=>{
        if(res.code === 200) {
            phoneMsg.textContent = '保存成功';
            phoneMsg.className = 'msg success';
            loadProfile();
        } else {
            phoneMsg.textContent = res.msg;
            phoneMsg.className = 'msg';
        }
    });
};
// 邮箱编辑
const editEmailBtn = document.getElementById('editEmailBtn');
const saveEmailBtn = document.getElementById('saveEmailBtn');
const infoEmailShow = document.getElementById('info-email-show');
const infoEmailInput = document.getElementById('info-email');
const emailMsg = document.getElementById('emailMsg');
editEmailBtn.onclick = function() {
    infoEmailShow.style.display = 'none';
    infoEmailInput.style.display = '';
    editEmailBtn.style.display = 'none';
    saveEmailBtn.style.display = '';
    infoEmailInput.focus();
};
saveEmailBtn.onclick = function() {
    let email = infoEmailInput.value.trim();
    fetch('/api/student/profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': getToken() },
        body: JSON.stringify({email})
    }).then(r=>r.json()).then(res=>{
        if(res.code === 200) {
            emailMsg.textContent = '保存成功';
            emailMsg.className = 'msg success';
            loadProfile();
        } else {
            emailMsg.textContent = res.msg;
            emailMsg.className = 'msg';
        }
    });
};

// 初始化
loadProfile();
setWelcome(studentName);
// 加载统计和荣誉
loadHonorSummary();
loadMyHonors();

// 编辑荣誉弹窗逻辑
let editingHonorId = null;
function editHonor(id) {
    editingHonorId = id;
    fetch(`/api/student/honor/detail/${id}`, {headers:{'Authorization':getToken()}})
    .then(r=>r.json()).then(res=>{
        if(res.code===200){
            let h = res.honor;
            document.getElementById('edit-title').value = h.title||'';
            document.getElementById('edit-type').value = h.honor_type||'';
            document.getElementById('edit-rank').value = h.rank||'';
            document.getElementById('edit-level').value = h.level||'';
            document.getElementById('edit-org').value = h.organization||'';
            document.getElementById('edit-date').value = h.date||'';
            document.getElementById('edit-desc').value = h.description||'';
            document.getElementById('edit-cert').value = '';
            document.getElementById('editHonorMsg').textContent = '';
            document.getElementById('editHonorModal').style.display = 'flex';
        }
    });
}
function closeEditHonor(){
    document.getElementById('editHonorModal').style.display = 'none';
}
function submitEditHonor(event){
    event.preventDefault();
    let title = document.getElementById('edit-title').value.trim();
    let honor_type = document.getElementById('edit-type').value;
    let rank = document.getElementById('edit-rank').value;
    let level = document.getElementById('edit-level').value;
    let organization = document.getElementById('edit-org').value.trim();
    let date = document.getElementById('edit-date').value;
    let description = document.getElementById('edit-desc').value.trim();
    let fileInput = document.getElementById('edit-cert');
    let file = fileInput.files[0];
    if(!title || !honor_type || !rank || !level || !organization || !date){
        document.getElementById('editHonorMsg').textContent = '请填写完整信息';
        return false;
    }
    let formData = new FormData();
    formData.append('title', title);
    formData.append('honor_type', honor_type);
    formData.append('rank', rank);
    formData.append('level', level);
    formData.append('organization', organization);
    formData.append('date', date);
    formData.append('description', description);
    if(file) formData.append('certificate', file);
    fetch(`/api/student/honor/edit/${editingHonorId}`, {
        method: 'POST',
        headers: { 'Authorization': getToken() },
        body: formData
    }).then(r=>r.json()).then(res=>{
        if(res.code===200){
            document.getElementById('editHonorMsg').textContent = '修改成功';
            loadMyHonors();
            setTimeout(closeEditHonor, 800);
        }else{
            document.getElementById('editHonorMsg').textContent = res.msg;
        }
    });
    return false;
}
function showChangePwd() {
  // 可跳转到个人信息页的修改密码区域
  document.querySelector('[data-section="profile"]').click();
  document.getElementById('oldPwd').focus();
}
function logoutAll() {
  if(confirm('确定要退出所有设备吗？')){
    // 这里应调用后端API实现所有设备登出，前端仅做演示
    localStorage.removeItem('token');
    location.replace('/static/index.html');
  }
}
function showDeleteAccount() {
  if(confirm('注销账号后将无法恢复，确定要注销吗？')){
    fetch('/api/student/delete_account', {
      method: 'POST',
      headers: { 'Authorization': getToken() }
    }).then(r=>r.json()).then(res=>{
      if(res.code === 200){
        alert('账号已注销');
        localStorage.removeItem('token');
        location.replace('/static/index.html');
      }else{
        alert(res.msg || '注销失败');
      }
    });
  }
}
</script>
</body>
</html> 